<template>
  <div class="go-game">
    <GameSettings 
      v-if="!gameStarted" 
      @start-game="startGame"
    />
    <div v-else class="game-container">
      <div class="score-board">
        <div class="player-info">
          <div
            class="player black"
            :class="{ active: currentPlayer === 'black' }"
          >
            黑方
            <div class="stone black"></div>
            <div class="captures">提子: {{ blackCaptures }}</div>
          </div>
          <div
            class="player white"
            :class="{ active: currentPlayer === 'white' }"
          >
            白方
            <div class="stone white"></div>
            <div class="captures">提子: {{ whiteCaptures }}</div>
          </div>
        </div>
        <div class="controls">
          <button @click="pass">虚着</button>
          <button @click="reset">重新开始</button>
        </div>
      </div>
      <GoBoard 
        ref="goBoard"
        :board-size="settings.boardSize"
        @game-over="gameOver"
        @update-captures="updateCaptures"
        @player-changed="updateCurrentPlayer"
        hide-game-info
      />
    </div>
  </div>
</template>

<script>
import GameSettings from './GameSettings.vue';
import GoBoard from './GoBoard.vue';

export default {
  name: 'GoGame',
  components: {
    GameSettings,
    GoBoard
  },
  data() {
    return {
      gameStarted: false,
      settings: {
        boardSize: 19,
        gameMode: 'local',
        komi: true
      },
      currentPlayer: 'black',
      blackCaptures: 0,
      whiteCaptures: 0
    }
  },
  methods: {
    startGame(settings) {
      this.settings = settings;
      this.gameStarted = true;
      this.currentPlayer = 'black';
      this.blackCaptures = 0;
      this.whiteCaptures = 0;
    },
    gameOver() {
      // 可以在这里添加游戏结束后的逻辑
      // 例如显示统计信息、保存游戏记录等
    },
    pass() {
      if (this.$refs.goBoard) {
        this.$refs.goBoard.pass();
        this.currentPlayer = this.currentPlayer === 'black' ? 'white' : 'black';
      }
    },
    reset() {
      if (this.$refs.goBoard) {
        this.$refs.goBoard.reset();
        this.currentPlayer = 'black';
        this.blackCaptures = 0;
        this.whiteCaptures = 0;
      }
    },
    updateCaptures(data) {
      if (data.player === 'black') {
        this.blackCaptures = data.captures;
      } else {
        this.whiteCaptures = data.captures;
      }
    },
    updateCurrentPlayer(player) {
      this.currentPlayer = player;
    }
  }
}
</script>

<style scoped>
.go-game {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
}

.game-container {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.score-board {
  flex: 0 0 250px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  height: fit-content;
}

.player-info {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.player {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  border-radius: 5px;
  transition: all 0.3s;
}

.player.active {
  background-color: #f0f0f0;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

button {
  padding: 8px 16px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #45a049;
}

.stone {
  border-radius: 50%;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
  width: 20px;
  height: 20px;
  margin: 5px 0;
}

.stone.black {
  background-color: #000;
  background: radial-gradient(circle at 30% 30%, #555, #222 40%, #000 80%);
  border: 1px solid #000;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.6), inset 0 -2px 3px rgba(255, 255, 255, 0.2), inset 0 2px 3px rgba(255, 255, 255, 0.3);
}

.stone.white {
  background-color: #fff;
  background: radial-gradient(circle at 30% 30%, #fff, #f5f5f5 40%, #eee 80%);
  border: 1px solid #ccc;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4), inset 0 -2px 3px rgba(0, 0, 0, 0.05), inset 0 2px 3px rgba(255, 255, 255, 0.9);
}

.captures {
  font-size: 14px;
  margin-top: 5px;
}
</style>